<template>
  <view class="service-detail">
    <!-- 顶部导航栏 -->
    <view class="nav-bar">
      <view class="back-btn" @click="goBack">
        <uni-icons type="arrow-left" size="24" color="#333"></uni-icons>
      </view>
      <view class="page-title">服务详情</view>
      <view class="share-btn" @click="shareService">
        <uni-icons type="redo" size="24" color="#333"></uni-icons>
      </view>
    </view>
    
    <!-- 服务基本信息 -->
    <view class="service-info">
      <image class="service-image" :src="serviceDetail.image" mode="aspectFill"></image>
      <view class="service-title">{{ serviceDetail.title }}</view>
      <view class="service-rating">
        <view class="rating-stars">
          <uni-icons v-for="i in 5" :key="i" type="star-filled" size="16" :color="i <= serviceDetail.rating ? '#ff7a45' : '#ddd'"></uni-icons>
          <text class="rating-value">{{ serviceDetail.rating }}</text>
          <text class="rating-count">({{ serviceDetail.ratingCount }})</text>
        </view>
        <view class="service-time">
          <uni-icons type="clock" size="14" color="#999"></uni-icons>
          <text>{{ serviceDetail.time }}</text>
        </view>
      </view>
    </view>
    
    <!-- 服务介绍 -->
    <view class="service-section">
      <view class="section-title">服务介绍</view>
      <view class="section-content">
        <text>{{ serviceDetail.description }}</text>
      </view>
    </view>
    
    <!-- 服务内容 -->
    <view class="service-section">
      <view class="section-title">服务内容包括</view>
      <view class="section-content service-includes">
        <view v-for="(item, index) in serviceDetail.includes" :key="index" class="include-item">
          <text>{{ item }}</text>
        </view>
      </view>
    </view>
    
    <!-- 服务人员 -->
    <view class="service-section">
      <view class="section-title">服务人员</view>
      <view class="staff-info">
        <image class="staff-avatar" :src="serviceDetail.staff.avatar" mode="aspectFill"></image>
        <view class="staff-detail">
          <view class="staff-name">{{ serviceDetail.staff.name }}</view>
          <view class="staff-meta">
            <text>{{ serviceDetail.staff.title }}</text>
            <text class="staff-rating">
              <uni-icons type="star-filled" size="14" color="#ff7a45"></uni-icons>
              {{ serviceDetail.staff.rating }}
            </text>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 服务流程 -->
    <view class="service-section">
      <view class="section-title">服务流程</view>
      <view class="service-process">
        <view class="process-item" v-for="(item, index) in serviceDetail.process" :key="index">
          <view class="process-step">
            <view class="step-number">{{ index + 1 }}</view>
            <view class="step-line" v-if="index < serviceDetail.process.length - 1"></view>
          </view>
          <view class="process-content">
            <view class="process-title">{{ item.title }}</view>
            <view class="process-desc">{{ item.description }}</view>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 用户评价 -->
    <view class="service-section">
      <view class="section-title">用户评价</view>
      <view class="review-list">
        <view class="review-item" v-for="(item, index) in serviceDetail.reviews" :key="index">
          <view class="review-header">
            <image class="reviewer-avatar" :src="item.avatar" mode="aspectFill"></image>
            <view class="reviewer-info">
              <view class="reviewer-name">{{ item.name }}</view>
              <view class="review-date">{{ item.date }}</view>
            </view>
            <view class="review-rating">
              <uni-icons v-for="i in 5" :key="i" type="star-filled" size="14" :color="i <= item.rating ? '#ff7a45' : '#ddd'"></uni-icons>
            </view>
          </view>
          <view class="review-content">{{ item.content }}</view>
        </view>
      </view>
      <view class="view-all-reviews" @click="viewAllReviews">查看全部评价</view>
    </view>
    
    <!-- 底部操作栏 -->
    <view class="bottom-bar">
      <view class="price-info">
        <text class="price-symbol">¥</text>
        <text class="price-value">{{ serviceDetail.price }}</text>
      </view>
      <button class="book-btn" @click="bookService">立即预约</button>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';

// 服务详情数据
const serviceDetail = ref({
  id: 1,
  title: '新房入住全屋深度清洁',
  image: '/static/images/service_detail1.jpg',
  rating: 4.9,
  ratingCount: '328条评价',
  time: '4-6小时',
  price: '399.00',
  description: '专业团队为您的新房提供全方位深度清洁服务，包括厨房、卫生间、客厅、卧室等所有区域。我们使用专业设备和清洁剂进行高效清洁，确保您的新家干净卫生，为您的入住做好准备。',
  includes: [
    '地面清洁', '墙面清洁', '厨房清洁', '厨房油污清洁', '卫生间地砖', '卫生间洁具', '家具表面清洁', '门窗清洁'
  ],
  staff: {
    name: '王阿姨',
    title: '高级保洁师 | 5年+经验',
    rating: 4.9,
    avatar: '/static/images/staff1.jpg'
  },
  process: [
    {
      title: '预约下单',
      description: '下单后客服会与您电话确认服务地址和时间'
    },
    {
      title: '上门服务',
      description: '专业人员按约定时间上门，请保持通讯畅通'
    },
    {
      title: '服务验收',
      description: '服务完成后，您检查并确认服务质量'
    },
    {
      title: '完成评价',
      description: '服务完成后，请对我们的服务进行评价'
    }
  ],
  reviews: [
    {
      name: '张女士',
      date: '2023-05-15',
      rating: 5,
      content: '服务很专业，阿姨很有耐心，清洁得非常干净，家里焕然一新，非常满意，下次还会再约！',
      avatar: '/static/images/user1.jpg'
    },
    {
      name: '李先生',
      date: '2023-05-10',
      rating: 5,
      content: '王阿姨服务态度很好，清洁很彻底，连我自己都没注意到的角落都清理得很干净，很专业！',
      avatar: '/static/images/user2.jpg'
    }
  ]
});

// 返回上一页
const goBack = () => {
  uni.navigateBack();
};

// 分享服务
const shareService = () => {
  uni.showShareMenu({
    withShareTicket: true,
    menus: ['shareAppMessage', 'shareTimeline']
  });
};

// 查看全部评价
const viewAllReviews = () => {
  uni.navigateTo({
    url: `/pages/service/reviews?id=${serviceDetail.value.id}`
  });
};

// 预约服务
const bookService = () => {
  uni.navigateTo({
    url: `/pages/order/create?serviceId=${serviceDetail.value.id}`
  });
};

onMounted(() => {
  // 获取路由参数
  const eventChannel = getOpenerEventChannel();
  const id = eventChannel ? eventChannel.id : 1;
  
  // 根据ID获取服务详情
  getServiceDetail(id);
});

// 获取服务详情
const getServiceDetail = (id) => {
  // 实际项目中应该调用API获取数据
  // 这里使用模拟数据
  console.log('获取服务ID:', id);
  
  // 可以根据ID从服务器获取详细数据
  // 这里使用的是预设的数据
};
</script>

<style lang="scss" scoped>
.service-detail {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 120rpx; // 为底部操作栏留出空间
}

// 顶部导航栏
.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 90rpx;
  padding: 0 30rpx;
  background-color: #fff;
  border-bottom: 1px solid #f0f0f0;
  
  .back-btn, .share-btn {
    width: 60rpx;
    height: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .page-title {
    font-size: 36rpx;
    font-weight: bold;
  }
}

// 服务基本信息
.service-info {
  background-color: #fff;
  padding-bottom: 30rpx;
  
  .service-image {
    width: 100%;
    height: 400rpx;
  }
  
  .service-title {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
    padding: 20rpx 30rpx;
  }
  
  .service-rating {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 30rpx;
    
    .rating-stars {
      display: flex;
      align-items: center;
      
      .rating-value {
        font-size: 28rpx;
        color: #ff7a45;
        font-weight: bold;
        margin: 0 10rpx;
      }
      
      .rating-count {
        font-size: 24rpx;
        color: #999;
      }
    }
    
    .service-time {
      display: flex;
      align-items: center;
      font-size: 24rpx;
      color: #999;
      
      text {
        margin-left: 6rpx;
      }
    }
  }
}

// 服务部分通用样式
.service-section {
  margin-top: 20rpx;
  background-color: #fff;
  padding: 30rpx;
  
  .section-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 20rpx;
  }
  
  .section-content {
    font-size: 28rpx;
    color: #666;
    line-height: 1.6;
  }
  
  .service-includes {
    display: flex;
    flex-wrap: wrap;
    
    .include-item {
      width: 50%;
      margin-bottom: 20rpx;
      display: flex;
      align-items: center;
      
      &::before {
        content: '•';
        color: #ff7a45;
        margin-right: 10rpx;
        font-size: 32rpx;
      }
    }
  }
}

// 服务人员
.staff-info {
  display: flex;
  align-items: center;
  
  .staff-avatar {
    width: 100rpx;
    height: 100rpx;
    border-radius: 50%;
    margin-right: 20rpx;
  }
  
  .staff-detail {
    .staff-name {
      font-size: 30rpx;
      font-weight: bold;
      color: #333;
      margin-bottom: 10rpx;
    }
    
    .staff-meta {
      display: flex;
      align-items: center;
      font-size: 24rpx;
      color: #999;
      
      .staff-rating {
        margin-left: 20rpx;
        display: flex;
        align-items: center;
        
        .uni-icons {
          margin-right: 4rpx;
        }
      }
    }
  }
}

// 服务流程
.service-process {
  .process-item {
    display: flex;
    margin-bottom: 30rpx;
    
    &:last-child {
      margin-bottom: 0;
    }
    
    .process-step {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-right: 20rpx;
      
      .step-number {
        width: 40rpx;
        height: 40rpx;
        border-radius: 50%;
        background-color: #ff7a45;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24rpx;
        margin-bottom: 10rpx;
      }
      
      .step-line {
        width: 2rpx;
        flex: 1;
        background-color: #eee;
      }
    }
    
    .process-content {
      flex: 1;
      
      .process-title {
        font-size: 28rpx;
        font-weight: bold;
        color: #333;
        margin-bottom: 10rpx;
      }
      
      .process-desc {
        font-size: 26rpx;
        color: #999;
      }
    }
  }
}

// 用户评价
.review-list {
  .review-item {
    margin-bottom: 30rpx;
    
    &:last-child {
      margin-bottom: 0;
    }
    
    .review-header {
      display: flex;
      align-items: center;
      margin-bottom: 15rpx;
      
      .reviewer-avatar {
        width: 60rpx;
        height: 60rpx;
        border-radius: 50%;
        margin-right: 15rpx;
      }
      
      .reviewer-info {
        flex: 1;
        
        .reviewer-name {
          font-size: 28rpx;
          color: #333;
          margin-bottom: 5rpx;
        }
        
        .review-date {
          font-size: 24rpx;
          color: #999;
        }
      }
      
      .review-rating {
        display: flex;
      }
    }
    
    .review-content {
      font-size: 26rpx;
      color: #666;
      line-height: 1.6;
    }
  }
}

.view-all-reviews {
  text-align: center;
  font-size: 28rpx;
  color: #ff7a45;
  margin-top: 20rpx;
  padding: 10rpx 0;
}

// 底部操作栏
.bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100rpx;
  background-color: #fff;
  display: flex;
  align-items: center;
  padding: 0 30rpx;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
  
  .price-info {
    flex: 1;
    display: flex;
    align-items: baseline;
    
    .price-symbol {
      font-size: 28rpx;
      color: #ff7a45;
    }
    
    .price-value {
      font-size: 40rpx;
      font-weight: bold;
      color: #ff7a45;
    }
  }
  
  .book-btn {
    width: 240rpx;
    height: 80rpx;
    line-height: 80rpx;
    background-color: #ff7a45;
    color: #fff;
    font-size: 32rpx;
    border-radius: 40rpx;
    text-align: center;
  }
}
</style>